<template>
  <div class="usercenter" :style="{width:centerwidth}">
      <div class="center_top">
          <div class="top_one">
              <a-avatar :size="64" :src="usinfo.image_url" />
          </div>
          <div class="top_two">
              <h2>{{usinfo.nickname}}</h2>
              <a-icon type="history" />
              <span>今日学习时长：{{usinfo.today_study_time}}小时</span>
              <p style="margin: 15px 0 0 0;">积分：{{usinfo.integral}}</p>
          </div>
          <div class="top_three">
              <h2>我的等级<a-icon type="to-top" /></h2>
              <p>还差{{usinfo.next_level_empirical}}经验升为LV.{{usinfo.level+1}}</p>
              <div class="progress">
                  <span>LV.{{usinfo.level}}</span>
                  <a-progress :percent="usinfo.empirical_rate" :show-info="false" />
                  <span>LV.{{usinfo.level+1}}</span>
              </div>
          </div>
          <div class="top_four">
              <img src="../../assets/img/center_one.png" alt="">
          </div>
      </div>
      <div class="ontime">
          <a-button @click="qiandao" :disabled="is_sing" style="background: none;border: 0;height: 47px;">
              {{qia}}
        </a-button>
      </div>
      <div class="center_all">
          <div class="ttab">
              <a-tabs :default-active-key="1" @change="callback" tabPosition="left" size="large">
                <a-tab-pane key="1" tab="我的课程">
                    <Myclass></Myclass>
                </a-tab-pane>
                <a-tab-pane key="2" tab="学习时长" force-render>
                    <Learntime :myranknum="usinfo.integral"></Learntime>
                </a-tab-pane>
                <a-tab-pane key="3" tab="我的排名">
                    <Myrank></Myrank>
                </a-tab-pane>
                <a-tab-pane key="4" tab="我的关注">
                    <Myattention></Myattention>
                </a-tab-pane>
                <a-tab-pane key="5" tab="学习记录">
                    <Learnrecord></Learnrecord>
                </a-tab-pane>
                <a-tab-pane key="6" tab="资料设置">
                    <Personinfo></Personinfo>
                </a-tab-pane>
                <a-tab-pane key="7" :disabled="teacherornot" tab="课程添加">
                    <Classadd></Classadd>
                </a-tab-pane>
                <a-tab-pane key="8" tab="修改密码">
                    <Passwordchange></Passwordchange>
                </a-tab-pane>
               </a-tabs>
          </div>
      </div>
      <div class="center_bottom">
          <div class="botton_rank">
            <div class="bottom_left">
                <div class="left_topp">
                    <div class="top_onerank">
                        <h3>部门总排名</h3>
                        <a-table  bordered :dataSource="totalrank" :columns="columns" :rowKey="(record, index) => index" :pagination="false">
                            <template slot="sort" slot-scope="text, record">{{record.totrank}}</template>
                            <template slot="area" slot-scope="text, record">{{record.department_name}}</template>
                            <template slot="rank" slot-scope="text, record">{{record.sum_integral}}</template>
                        </a-table>
                    </div>
                    
                </div>
            </div>
            <div class="bottom_right">
                <div class="top_onerank">
                        <h3>部门平均排名</h3>
                        <a-table  bordered :dataSource="avgrank" :columns="columns1" :rowKey="(record, index) => index" :pagination="false">
                            <template slot="sort" slot-scope="text, record">{{record.totrank}}</template>
                            <template slot="area" slot-scope="text, record">{{record.department_name}}</template>
                            <template slot="rank" slot-scope="text, record">{{record.avg_integral}}</template>
                        </a-table>
                    </div>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import Myclass from './myclass'
import Learntime from './learntime'
import Myrank from './myrank'
import Myattention from './myattention '
import Learnrecord from './learnrecord'
import Personinfo from './personinfo'
import Classadd from './classadd'
import Passwordchange from './passwordchange'
import {getuserinfoData,singinchange,getmytotalrankData} from '../../api/usercenter'
export default {
    components:{
        Myclass,Learntime,Myrank,Myattention,Learnrecord,Personinfo,Classadd,Passwordchange
    },
    data() {
        return {
            columns: [
              { title: "排名", scopedSlots: { customRender: "sort" }, width: 80 },
              {
                title: "部门",
                scopedSlots: { customRender: "area" }
              },
              {
                title: "总积分",
                scopedSlots: { customRender: "rank" }
              },
            ],
            columns1: [
              { title: "排名", scopedSlots: { customRender: "sort" }, width: 80 },
              {
                title: "部门",
                scopedSlots: { customRender: "area" }
              },
              {
                title: "平均积分",
                scopedSlots: { customRender: "rank" }
              },
            ],
            current:2,
            usinfo:{},
            qia:'签到',
            is_sing:false,
            totalrank:[
                {
                    totrank:0,
                    sum_integral:0,
                    department_name:''
                }
            ],
            avgrank:[
                {
                    totrank:0,
                    sum_integral:0,
                    avg_integral:''
                }
            ],
            adaqwe:0,
            tttest:1,
            teacherornot:false
        }
    },
    methods: {
        callback(key) {
        },
        qiandao(){
            if(this.qia=='签到'){
                singinchange().then(res=>{
                    this.qia = '已签到'
                    this.is_sing=true
                    this.$message.success('签到成功，经验+50，积分+5')
                    this.qqdasz()
                })
            }
        },
        qqdasz(){
            getuserinfoData().then(res=>{
                this.usinfo = res
                if(res.is_sing==true){
                    this.qia = "已签到"
                }
            })
        },
        mmnnvv(){
            getmytotalrankData().then(res=>{
                this.totalrank = res.sum
                function compare(property){
                    return function(a,b){
                        var value1 = a[property];
                        var value2 = b[property];
                        return value1 - value2;
                    }
                }
                this.totalrank.sort(compare('sum_integral')).reverse()
                this.totalrank.map((item,index)=>{
                    item.totrank = index+1
                })
            })
        },
        bvxxa(){
            getmytotalrankData().then(res=>{
                this.avgrank = res.avg
                function compare(property){
                    return function(a,b){
                        var value1 = a[property];
                        var value2 = b[property];
                        return value1 - value2;
                    }
                }
                this.avgrank.sort(compare('avg_integral')).reverse()
                this.avgrank.map((item,index)=>{
                    item.totrank = index+1
                })
            })
        }
    },
    created(){
        this.qqdasz()
        this.teacherornot = !localStorage.getItem('teacherornot')
    },
    mounted(){
        this.mmnnvv()
        this.bvxxa()
    },
    computed:{
        centerwidth: ()=>{
            if(window.innerWidth>=1200){
                return 1200+'px'
            }else{
                return '100%'
            }
        }
    },
}
</script>

<style lang='less' scope>
.usercenter{
    margin: 0 auto;
    overflow: hidden;
    padding-top: 30px;
    .center_top{
        display: flex;
        justify-content: space-between;
        padding: 15px;
        width: 80%;
        background: white;
        margin: 0 auto;
        border-radius: 15px;
        .top_one{
            width: 5%;
            display: table;
            margin: auto 0;
            margin-left: 15px;
        }
        .top_two{
            width: 20%;
            display: table;
            margin: auto 0;
            h2{
                letter-spacing: 5px;
            }
            i{
                color: #008D48;
                margin-right: 5px;
            }
            span{
                color: #008D48;
            }
        }
        .top_three{
            width: 50%;
            text-align: center;
            h2{
                color: #008D48;
            }
            p{
                font-size: 16px;
                letter-spacing: 2px;
            }
            .progress{
                display: flex;
                justify-content: space-between;
                span:nth-of-type(1){
                    background: #EBE0FE;
                    color: #9147D0;
                    border: 2px solid #C7AAEC;
                    border-radius: 12px;
                    width: 53px;
                    font-size: 12px;
                    margin-top: 2px;
                    font-weight: bold;
                }
                span:nth-of-type(2){
                    background: #FFE6AE;
                    color: #FD5E37;
                    border: 2px solid #E49F44;
                    border-radius: 12px;
                    width: 53px;
                    font-size: 12px;
                    margin-top: 2px;
                    font-weight: bold;
                }
            }
        }
        .top_four{
            width: 15%;
            margin-top: -14px;
            img{
                width: 100%;
                height: 14vh;
            }
        }
    }
    .ontime{
        width: 80%;
        margin: 0 auto;
        margin-top: 3vh;
        margin-bottom: 3vh;
        padding-left: 17px;
        span{
            padding: 10px;
            cursor: pointer;
            background: #18A862;
            color: white;
            border-radius: 14px;
            font-size: 17px;
            letter-spacing: 7px;
            text-align: center;
            padding-left: 16px;
        }
    }
    .center_all{
        width: 80%;
        margin: 0 auto;
        .ttab{
            padding: 15px;
            background: white;
            height: 63vh;
        }
    }
    .center_bottom{
        width: 80%;
        margin: 0 auto;
        padding: 10px;
        padding: 55px 0 35px 0;
        .botton_rank{
            background: white;
            padding: 18px;
            display: flex;
            justify-content: space-between;
            .bottom_left{
                width: 48%;
                padding-right: 35px;
                border-right: 1px solid grey;
                .left_topp{
                    .top_onerank:nth-of-type(2){
                        margin-top: 25px;
                    }
                }
            }
            .bottom_right{
                width: 49%;
            }
        }
    }
}
</style>